<!doctype html>

<my-app></my-app>

<script type="module">
  import { component, createContext, useContext, useState, html } from '../haunted.js';

  const ThemeContext = createContext();

  customElements.define('theme-provider', ThemeContext.Provider);

  function Circle({ theme }) {
    return html`
      <svg width=${100} height=${100}>
        <circle
         cx=${50}
         cy=${50}
         r=${45}
         stroke-width="4px"
         stroke="#000"
         fill=${theme === 'spooky' ? '#555' : '#fff'}
         >
        </circle>
      </svg>
    `;
  }

  customElements.define('my-circle', component(Circle));

  function Child() {
    const context = useContext(ThemeContext);

    return html`<my-circle .theme=${context}></my-circle>`;
  }

  customElements.define('my-child', component(Child));
  customElements.define('theme-consumer', ThemeContext.Consumer);

  function App() {
    const [theme, setTheme] = useState('spooky');

    return html`
        <select
          value=${theme}
          @change=${(e) => setTheme(e.target.value)}
        >
          <option value="spooky">Spooky</option>
          <option value="light">Light</option>
        </select>
        <ul>
          <li>
            <theme-provider .value=${theme}>
              <my-child></my-child>
              <theme-consumer
                .render=${theme => html`
                  <my-circle .theme=${theme}></my-circle>
                `}
              ></theme-consumer>
              <ul>
                <li>
                  <theme-provider .value=${theme === 'spooky' ? 'light' : 'spooky'}>
                    <my-child></my-child>
                  </theme-provider>
                </li>
              </ul>
            </theme-provider>
          </li>
        </ul>
    `;
  }

  customElements.define('my-app', component(App));
</script>